<template>
  <div class="addAddress">
    <ul class="addAddressForm">
      <li>
        <p>收货人</p>
        <div>
          <input type="text" placeholder="请填写收货人" v-model="address.name">
        </div>
      </li>
      <li>
        <p>联系电话</p>
        <div>
          <input type="number" placeholder="请填写联系电话" class="input" pattern="[0-9]*" v-model="address.phone">
        </div>
      </li>
      <li>
        <p>所在地区</p>
        <div>
          <address-picker 
          @province="getprovince" 
          @city="getcity" 
          @district="getdistrict">
          </address-picker>
        </div>
      </li>
      <li>
        <p>详细地址</p>
        <div>
          <input type="text" placeholder="请填写详细地址" v-model="address.street">
        </div>
      </li>
    </ul>
    <div class="addAddressBtn" @click="edit">
      <p>保存</p>
    </div>
  </div>
</template>

<script>
  import addressPicker from './picker.vue'
  import {mapGetters} from 'vuex'
  export default {
    components:{
      addressPicker
    },
    computed: {
      ...mapGetters({
        address: 'edittingAddress'
      }),
    },
    data(){
      return{
        provinceName:'',
        cityName:'',
        districtName:'',
      }
    },
    methods:{
      getprovince(val){
        console.log(val)
        this.provinceName = val
      },
      getcity(val){
        console.log(val)
        this.cityName = val
      },
      getdistrict(val){
        console.log(val)
        this.districtName = val
      },
      edit () {
        if (!this._validateAddress()) {
          return
        }
        //通过是否有地址的id来判断是编辑进来还是新增地址进来
        if(this.address.id){ //id存在就是从编辑进来的
          console.log('从编辑进来的')
          this.editAddress()
        }else{
          console.log('从新加入进来的')
          this.addAddress()
        } 
      },
      editAddress() {//这是点击编辑的时候需要的操作
        let UserAddressRequest = {
          name : this.address.name,
          phone : this.address.phone,
          province : this.provinceName,
          city : this.cityName,
          district : this.districtName,
          street : this.address.street,
        }
        console.log(UserAddressRequest)
        this.$http.post(`address/${this.address.id}`,UserAddressRequest ,'application/json').then((res)=>{
          console.log(res.data)
          this.$store.dispatch("updateAddress",res.data.data) //更新地址
          this.$store.dispatch("editAddress",res.data.data)  //更改地址
           wx.navigateBack();   //返回上一个页面
        })
      },
    
      addAddress(){
        let UserAddressRequest = {
          name : this.address.name,
          phone : this.address.phone,
          province : this.provinceName,
          city : this.cityName,
          district : this.districtName,
          street : this.address.street,
        }
        console.log(UserAddressRequest)
        this.$http.post(`address/new/`,UserAddressRequest ,'application/json').then((res)=>{
          console.log('把地址发给后台返回的结果',res)
          this.$store.dispatch("pushNewAddress",res.data.data)
          wx.navigateBack();   //返回上一个页面
        })
      },
      _validateAddress() {
        console.log(this.address)
        if (this.address.name === '' || this.address.name === undefined) {
          this.wxAlert('请输入收货人的姓名')
          return false
        }
        if (this.address.phone === '' || this.address.phone === undefined || !this.address.phone.match(/^1[0-9]{10}$/)) {
          this.wxAlert('请正确输入收货人的联系电话')
          return false
        }
        if (this.provinceName === '' || this.provinceName === undefined) {
          console.log("00000000000")
          this.wxAlert('请选择收货人的地区')
          return false
        }
        if (this.address.street === '' || this.address.street === undefined) {
          this.wxAlert('请输入收货人的详细地址')
          return false
        }
        return true
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 2000,
            mask: true
        })
      }
    }
  }
</script>

<style scoped>
.addAddress{
  font-size: 30rpx;
  color: #2a2a2a;
}
.addAddress .addAddressForm li{
  display: flex;
  height: 110rpx;
  align-items: center;
  font-size: 32rpx;
  color: #2a2a2a;
  border-top: 1rpx solid #efeff4;
  padding: 0 24rpx;
}
.addAddress .addAddressForm li div{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  margin-left: 20rpx;
}
.addAddress .addAddressForm li div input{
  flex: 1;
  text-align: right;
}
.addAddress .addAddressBtn{
  padding: 0 30rpx;
  margin-top: 80rpx;
}
.addAddress .addAddressBtn p{
  width: 100%;
  height: 88rpx;
  background: #e1c7d2;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  color: #fff;
}
</style>
